<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <script src="../js/jquery-3.1.1.js"></script>
        <title></title>
        <style>
            div{
                width: 100px;
                height: 120px;
                float: left;
                
            }
            div span{
                display: inline-block;
                width: 100px;
                height: 30px;
                text-align: center;
                border: 1px solid gray;
                line-height: 2;
            }
            div span:hover{
                cursor: pointer;
            }
            div ul{
                display: none;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            div ul li{
                
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 2;
                border: 1px solid gray;
                border-width: 0 1px 1px 1px;
            }
            div ul li:hover{
                cursor: pointer;
            }
            p{
                position: absolute;
                left: 100px;
                top: 150px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <span>销售订单</span>
            <ul>
                <li>订单1</li>
                <li>订单2</li>
                <li>订单3</li>
            </ul>
        </div>
        <div id="d2">
            <span>消费订单</span>
            <ul>
                <li>消费1</li>
                <li>消费2</li>
                <li>消费3</li>
            </ul>
        </div>
        <p></p>
    </body>
</html>

<script>
    // 给第一个span绑定点击事件
    $('#d1 span').mousemove(function(){
        // 让第一个ul显示
        $('#d1 ul').css('display','block')
        // 给第一个ul的li标签绑定点击事件
        $('#d1 li').mouseover(function(){
            // 鼠标移上去显示背景颜色 兄弟的显示白色
            $(this).css('background-color','gray')
            .siblings().css('background-color','white')
        })
        // 给li绑定点击事件 
        $('#d1 li').click(function(){
            // 让p显示li内的内容
            $('p').text($(this).text())
            // 点击后让ul隐藏
            $('#d1 ul').css('display','none');
        })
        // 让第二个ul隐藏
        $('#d2 ul').css('display','none')
    })
    
    // 原理同上
    $('#d2 span').mouseover(function(){
        $('#d2 ul').css('display','block')

        $('#d2 li').mouseover(function(){
            // 鼠标移上去显示背景颜色 兄弟的显示白色
            $(this).css('background-color','gray')
            .siblings().css('background-color','white')
        })
        $('#d2 li').click(function(){
            // 让p显示li内的内容
            $('p').text($(this).text())
            // 点击后让ul隐藏
            $('#d2 ul').css('display','none');
        })
        $('#d1 ul').css('display','none')
    })

    $('ul').mouseleave(function(){
        $(this).css('display','none');
    })


</script>

